<template>
    <!-- element-ui 同一个组件不能嵌套使用？ -->
    <div class="box">
        <header>
            <!-- 文字 -->
            <div class="text">南京<img src="../assets/下.png" alt=""></div>
            <!-- 搜索 -->
            <div class="search">
                <!-- 矢量图放大镜 -->
                <div class="iconfont icon-fangdajing"></div>
                <div class="text">搜索品牌、级别</div>
                <!-- 图片相机 -->
                <div class="tupian"><img src="../assets/截图_proc.jpg" alt=""></div>
            </div>
            <!-- 图片消息 -->
            <div class="message"><img src="../assets/消息_proc.jpg" alt=""></div>
        </header>
        <main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="新能源" name="first">
                    <!-- 标签页1 -->
                    <div class="tab-box1">
                        <!-- 图标 -->
                        <div class="tubiao">
                            <ul>
                                <li><img src="../assets/经销商排行.png" alt=""></li>
                                <li>销量排行</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/商机对比.png" alt=""></li>
                                <li>实测报告</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/历史商机.png" alt=""></li>
                                <li>周刊精选</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/客户排行.png" alt=""></li>
                                <li>续航排行</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/采购.png" alt=""></li>
                                <li>新车导购</li>
                            </ul>
                        </div>
                        <!-- 报价 -->
                        <div class="baojia">
                            <!-- 文字 -->
                            <div class="text">看过的车</div>
                            <!-- 内容 -->
                            <div class="content">
                                <!-- 在线图片 -->
                                <div class="zhaixian"><img src="https://car2.autoimg.cn/cardfs/product/g26/M08/11/1B/autohomecar__ChsEdmMYAE6AfoW8AAVB0HD4Ye0342.jpg" alt=""></div>
                                <!-- 文本 -->
                                <div class="text1">
                                    <i>途昂 2017款</i>
                                    <!-- 颜色 -->
                                    <i class="color">22.00万</i>
                                </div>
                                <!-- 按钮 -->
                                <div class="button">
                                    <button>询底价</button>
                                </div>
                            </div>
                            
                        </div>
                        <!-- 排行 -->
                        <div class="paihang">
                            <!-- 文字 -->
                            <div class="text">
                                <!-- 颜色 -->
                                <i class="color1">销量排行</i>
                                <i class="color2">更多></i>
                            </div>
                            <!-- 内容 -->
                            <div class="content">
                                <ul>
                                    <li>1</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g26/M06/70/81/400x300_autohomecar__ChsEdmLgq7KAERtcAAkcgY5qfnk721.png" alt=""></li>
                                    <li>宋PLUS新能源</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>2</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g26/M05/9B/74/400x300_autohomecar__ChsEdmORrAGANlQJAAa7V8MDrEY072.png" alt=""></li>
                                    <li>朗逸</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>3</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g30/M03/01/03/400x300_autohomecar__ChxknGNrImeAZppUAAn2-Z8i3oY995.png" alt=""></li>
                                    <li>宏光MINIEV</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>4</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g15/M09/C2/47/400x300_autohomecar__ChsF3GD_qGCAJpmuAAbn_QfNFQQ232.png" alt=""></li>
                                    <li>卡罗拉</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>1</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g26/M06/70/81/400x300_autohomecar__ChsEdmLgq7KAERtcAAkcgY5qfnk721.png" alt=""></li>
                                    <li>宋PLUS新能源</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>2</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g26/M05/9B/74/400x300_autohomecar__ChsEdmORrAGANlQJAAa7V8MDrEY072.png" alt=""></li>
                                    <li>朗逸</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>3</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g30/M03/01/03/400x300_autohomecar__ChxknGNrImeAZppUAAn2-Z8i3oY995.png" alt=""></li>
                                    <li>宏光MINIEV</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                                <ul>
                                    <li>4</li>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g15/M09/C2/47/400x300_autohomecar__ChsF3GD_qGCAJpmuAAbn_QfNFQQ232.png" alt=""></li>
                                    <li>卡罗拉</li>
                                    <li><button>查报价单</button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="新车" name="second">
                    <!-- 标签页2 -->
                    <div class="tab-box2">
                        <!-- 轮播图 -->
                        <div class="lbt">
                            <swiper :options="swiperOption">
                                <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liimg"><img :src="slide.src">
                                </swiper-slide>
                                <p class="swiper-pagination" slot="pagination"></p></swiper>
                        </div>
                        <!-- 图标 -->
                        <div class="tubiao">
                            <ul>
                                <li><img src="../assets/经销商排行.png" alt=""></li>
                                <li>销量排行</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/商机对比.png" alt=""></li>
                                <li>实测报告</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/历史商机.png" alt=""></li>
                                <li>周刊精选</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/客户排行.png" alt=""></li>
                                <li>续航排行</li>
                            </ul>
                            <ul>
                                <li><img src="../assets/采购.png" alt=""></li>
                                <li>新车导购</li>
                            </ul>
                        </div>
                        <!-- 选车 -->
                        <div class="xuanche">
                            <!-- 价格 -->
                            <div class="jiage">
                                <i>10万以下</i>
                                <i>10-15万</i>
                                <i>15-20万</i>
                                <i>20-30万</i>
                                <i>轿车</i>
                                <i>SUV</i>
                                <i>新能源</i>
                                <i>更多</i>
                            </div>
                            <!-- 品牌 -->
                            <div class="pinpai">
                                <ul>
                                        <li><img src="https://car3.autoimg.cn/cardfs/series/g26/M0B/AE/B3/autohomecar__wKgHEVs9u5WAV441AAAKdxZGE4U148.png" alt=""></li>
                                        <li>奥迪</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g26/M00/AF/E7/100x100_0_q30_autohomecar__wKgHHVs9u6mAaY6mAAA2M840O5c440.png" alt=""></li>
                                        <li>奔驰</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g1/M08/18/4F/100x100_0_q30_autohomecar__ChsEmV5fMd6AZK-bAAAg8taR7xI407.png" alt=""></li>
                                        <li>宝马</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car2.autoimg.cn/cardfs/series/g30/M08/1E/69/autohomecar__ChxknGMgJQWADHouAAAHAh_MCMg148.png" alt=""></li>
                                        <li>凯迪拉克</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car2.autoimg.cn/cardfs/series/g4/M0F/33/79/autohomecar__ChsFVmDyoR-AA-qXAAAh289AfBc459.png" alt=""></li>
                                        <li>雷克萨斯</li>
                                    </ul>
                            </div>
                            <!-- 车型 -->
                            <div class="chexing">
                                <ul>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g29/M08/CA/6A/192x144_0_q30_autohomecar__ChwFk2MkIkeABle6AAW9qqawvEA320.png" alt=""></li>
                                    <li>宝马三系</li>
                                </ul>
                                <ul>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g24/M08/91/FE/192x144_0_q30_autohomecar__Chtk3WCjUUiAWOSgAAxCg-Cn6vI964.png" alt=""></li>
                                    <li>奥迪Q5L</li>
                                </ul>
                                <ul>
                                    <li><img src="https://m1.autoimg.cn/newsdfs/g3/M04/0D/41/192x144_0_q30_autohomecar__ChwFlV9vN-qAFSuEAAZ01RVJkOk335.png" alt=""></li>
                                    <li>奔驰E级</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="豪华品牌" name="third">
                    <!-- 标签页3 -->
                    <div class="tab-box3">
                        <!-- 车标 -->
                        <div class="tubiao">
                            <div class="tubiao-box">
                                <div class="logo">
                                    <ul>
                                        <li><img src="https://car3.autoimg.cn/cardfs/series/g26/M0B/AE/B3/autohomecar__wKgHEVs9u5WAV441AAAKdxZGE4U148.png" alt=""></li>
                                        <li>奥迪</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g26/M00/AF/E7/100x100_0_q30_autohomecar__wKgHHVs9u6mAaY6mAAA2M840O5c440.png" alt=""></li>
                                        <li>奔驰</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g1/M08/18/4F/100x100_0_q30_autohomecar__ChsEmV5fMd6AZK-bAAAg8taR7xI407.png" alt=""></li>
                                        <li>宝马</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car2.autoimg.cn/cardfs/series/g30/M08/1E/69/autohomecar__ChxknGMgJQWADHouAAAHAh_MCMg148.png" alt=""></li>
                                        <li>凯迪拉克</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car2.autoimg.cn/cardfs/series/g4/M0F/33/79/autohomecar__ChsFVmDyoR-AA-qXAAAh289AfBc459.png" alt=""></li>
                                        <li>雷克萨斯</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car2.autoimg.cn/cardfs/series/g7/M09/D3/58/autohomecar__ChsEvmFNNr-ALaiJAAA-q3aAE8E438.png" alt=""></li>
                                        <li>沃尔沃</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car2.autoimg.cn/cardfs/series/g24/M08/F4/68/autohomecar__Chtk3WDeiCWAQgzNAAAqNs0dL_I640.png" alt=""></li>
                                        <li>红旗</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car3.autoimg.cn/cardfs/series/g30/M05/AF/3C/autohomecar__wKgHHFs9uTuAByb_AAA0TOzXvPg367.png" alt=""></li>
                                        <li>路虎</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car3.autoimg.cn/cardfs/series/g2/M02/2A/97/autohomecar__ChsEkF7Dp1mAZ9jIAAAUTcLHE7s133.png" alt=""></li>
                                        <li>保时捷</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://car3.autoimg.cn/cardfs/series/g30/M07/AD/FA/autohomecar__ChcCSV5FFiGAAp3HAAAv0IZ8sqc957.png" alt=""></li>
                                        <li>捷豹</li>
                                    </ul>
                                </div>
                                <!-- 豪车 -->
                                <div class="haoche">
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g29/M08/CA/6A/192x144_0_q30_autohomecar__ChwFk2MkIkeABle6AAW9qqawvEA320.png" alt=""></li>
                                        <li>宝马三系</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g24/M08/91/FE/192x144_0_q30_autohomecar__Chtk3WCjUUiAWOSgAAxCg-Cn6vI964.png" alt=""></li>
                                        <li>奥迪Q5L</li>
                                    </ul>
                                    <ul>
                                        <li><img src="https://m1.autoimg.cn/newsdfs/g3/M04/0D/41/192x144_0_q30_autohomecar__ChwFlV9vN-qAFSuEAAZ01RVJkOk335.png" alt=""></li>
                                        <li>奔驰E级</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 销量排行 -->
                        <div class="xiaoliang">
                            <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                                <el-radio-button label="top">top</el-radio-button>
                                <el-radio-button label="right">right</el-radio-button>
                                <el-radio-button label="bottom">bottom</el-radio-button>
                                <el-radio-button label="left">left</el-radio-button>w
                            </el-radio-group> -->
                            <el-tabs :tab-position="tabPosition" style="height: 200px;">
                                <el-tab-pane label="销量排行" name="first">
                                    <div class="content">
                                        <ul>
                                            <li>1</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g26/M06/70/81/400x300_autohomecar__ChsEdmLgq7KAERtcAAkcgY5qfnk721.png" alt=""></li>
                                            <li>宋PLUS新能源</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                        <ul>
                                            <li>2</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g26/M05/9B/74/400x300_autohomecar__ChsEdmORrAGANlQJAAa7V8MDrEY072.png" alt=""></li>
                                            <li>朗逸</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                        <ul>
                                            <li>3</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g30/M03/01/03/400x300_autohomecar__ChxknGNrImeAZppUAAn2-Z8i3oY995.png" alt=""></li>
                                            <li>宏光MINIEV</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                        <ul>
                                            <li>4</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g15/M09/C2/47/400x300_autohomecar__ChsF3GD_qGCAJpmuAAbn_QfNFQQ232.png" alt=""></li>
                                            <li>卡罗拉</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="降价排行" name="second">
                                    <div class="content">
                                        <ul>
                                            <li>1</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g26/M06/70/81/400x300_autohomecar__ChsEdmLgq7KAERtcAAkcgY5qfnk721.png" alt=""></li>
                                            <li>宋PLUS新能源</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                        <ul>
                                            <li>2</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g26/M05/9B/74/400x300_autohomecar__ChsEdmORrAGANlQJAAa7V8MDrEY072.png" alt=""></li>
                                            <li>朗逸</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                        <ul>
                                            <li>3</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g30/M03/01/03/400x300_autohomecar__ChxknGNrImeAZppUAAn2-Z8i3oY995.png" alt=""></li>
                                            <li>宏光MINIEV</li>
                                            <li><button>查报价单</button></li>
                                        </ul>
                                        <ul>
                                            <li>4</li>
                                            <li><img src="https://m1.autoimg.cn/newsdfs/g15/M09/C2/47/400x300_autohomecar__ChsF3GD_qGCAJpmuAAbn_QfNFQQ232.png" alt=""></li>
                                            <li>卡罗拉</li>
                                            <li><button>查报价单</button></li>
                                        </ul>                                      
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </main>
        <footer>
            <ul>
                <li>
                    <router-link to="/xinche"> <img src="../assets/新车.png" alt=""></router-link>
                </li>
                <li>
                    新车
                </li>
            </ul>
            <ul>
                <li>
                    <router-link to="/xinnengyuan"> <img src="../assets/新能源.png" alt=""></router-link>                          
                </li>
                <li>
                    新能源
                </li>
            </ul>
            <ul>
                <li>
                    <router-link to="/faxian"><img src="../assets/发现.png" alt=""></router-link>
                </li>
                <li>
                    发现
                </li>
            </ul>
            <ul>
                <li>
                    <router-link to="/ershouche"><img src="../assets/二手车.png" alt=""></router-link>
                </li>
                <li>
                    二手车
                </li>
            </ul>
            <ul> 
                <li>
                    <router-link to="/wode"><img src="../assets/我的.png" alt=""></router-link>
                </li>
                <li>
                    我的
                </li>
            </ul>
        </footer>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    data() {
      return {
        activeName: 'second',
        tabPosition:'top',
        swiperOption:{
            autoplay:true,
            pagination:{
                el: '.swiper-pagination'
            }
        },
        swiperSlides : [{id:1,src:"https://m1.autoimg.cn/newsdfs/g22/M13/74/71/1280x0_0_q40_autohomecar__ChsF21_PNAGAEGaeAAYgqW26jCc129.png.webp"},{id:2,src:"https://m1.autoimg.cn/newsdfs/g25/M02/AF/28/1280x0_0_q40_autohomecar__ChtliGO-4GWAXUeXAAGsP2y1hrQ851.jpg.webp"},{id:3,src:"https://m1.autoimg.cn/newsdfs/g24/M02/39/CB/1280x0_0_q40_autohomecar__Chxky2O9QJeAYJtQAAJ6WieqTYs836.jpg.webp"},{id:4,src:"https://img2.autoimg.cn/admdfs/g24/M05/28/69/Chtk3WO_XcGAMnXKAAL_IP5ffgE868.jpg"},]
      };
      
    },
    components:{
        swiper,
        swiperSlide
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style lang="scss" scoped>
header{
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    .text{
        font-size: 16px;
        margin-left: 20px;
        margin-right: 20px;
        
        img{
            width: 15px;
            height: 15px;
        }
    }
    .search{
        width: 230px;
        height: 35px;
        border: solid 1px blue;
        border-radius: 5px;
        display: flex;
        align-items: center;
        .icon-fangdajing{
            // font-size: 0.4rem;
            // width: 16px;
            // height: 16px;
            color: rgb(55, 55, 55);
            margin-right: 10px;
        }
        .text{
            margin: 0;
            margin-right: 50px;
            color: #BFC5D2;
        }
        .tupian img{
            width: 26px;
            height: 26px;
        }
    }
    .message{
        img{
            width: 26px;
            height: 26px;
        }
        
    }
}
main{
    padding: 10px;
    .el-tabs__nav-wrap::after{
        background-color: rgb(255, 255, 255);
    }
    .tab-box1{
        .tubiao{
            display: flex;
            font-size: 12px;
            
            img{
                width: 40px;
                height: 40px;
            }
            ul{
                list-style: none;
            }
        }
        .baojia{

            .text{
                font-size: 15px;
                font-weight: 900;
                margin: 10px 0 20px 0px;
            }
            .content{
                padding: 12px 0 12px 0;
                // height: 80px;
                display: flex;
                background: rgb(234, 234, 234);
                .zhaixian{
                    img{
                        width: 50px;
                        height: 50px;
                    }
                }
                .text1{
                    display: flex;
                    flex-direction: column;
                    font-size: 12px;
                    i{
                        margin-top: 7px
                    }
                    .color{
                        color: red;
                    }
                }
                .button{
                    button{
                        width: 80px;
                        height: 35px;
                        color: #FFFFFF;
                        background-color: rgb(0, 0, 255);
                        border-radius: 10px;

                    }
                }
            }
        }
        .paihang{
            .text{
                font-size: 15px;
                display: flex;
                justify-content: space-between;
                margin: 10px 0 10px 0;
                i{
                    margin: 0;
                }
                .color1{
                    font-weight: 900;
                }
                .color2{
                    margin-right: 1px;
                    color: #848689;
                }
            }
            .content{
                ul{
                    display: flex;
                    list-style: none;
                    font-size: 20px;

                    img{
                        width: 60px;
                        height: 60px;
                    }
                    li:nth-child(3){
                        width: 154px;
                        line-height: 60px;
                    }
                    li:nth-child(4){
                        line-height: 60px;
                    }
                }
            }
        }
    }
    .tab-box2{
        .lbt{
            // margin-top: 40px;
            width: 100%;
            height: 166px;
            margin-bottom: 20px;
            .liimg img{
                width: 100%;
                height: 166px;
            }
        }
        .tubiao{
            display: flex;
            font-size: 12px;
            
            img{
                width: 40px;
                height: 40px;
            }
            ul{
                list-style: none;
            }
        }
        .xuanche{
            .jiage{
                display: flex;
                flex-wrap: wrap;
                margin-top: 20px;
                i{
                    width: 80px;
                    height: 30px;
                    border: 1px solid rgb(0, 0, 0);
                    font-size: 12px;
                    text-align: center;
                    line-height: 30px;
                }
            }
            .pinpai{
                font-size: 12px;
                display: flex;
                flex-wrap: wrap;
                ul{
                    width: 55px;
                    list-style: none;
                    padding: 10px 0 0 15px;
                }
                img{
                    width: 36px;
                    height: 36px;
                }
            }
            .chexing{
                margin-top: 10px;
                display: flex;
                ul{
                    display: flex;
                    list-style: none;
                    flex-direction: column;
                }
                img{
                    width: 92px;
                    height: 69px;
                }
            }
        }
    }
    .tab-box3{
        .tubiao-box{
            .logo{
                font-size: 12px;
                display: flex;
                flex-wrap: wrap;
                ul{
                    width: 55px;
                    list-style: none;
                    padding: 10px 0 0 15px;
                }
                img{
                    width: 36px;
                    height: 36px;
                }
                
            }
            .haoche{
                margin-top: 10px;
                display: flex;
                ul{
                    display: flex;
                    list-style: none;
                    flex-direction: column;
                }
                img{
                    width: 92px;
                    height: 69px;
                }
            }
        }
        .xiaoliang{
            height: 300px;
            margin-bottom: 60px;
            .content{
                ul{
                    display: flex;
                    list-style: none;
                    font-size: 20px;
                    img{
                        width: 60px;
                        height: 60px;
                    }
                    li:nth-child(3){
                        width: 154px;
                        line-height: 60px;
                    }
                    li:nth-child(4){
                        line-height: 60px;
                    }
                }
            }
        }
    }
}
footer{
        width: 100%;
        height: 60px;
        background-color: #FFFFFF;
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        box-shadow: 0 0 4px 1px #848689;
        ul {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px;
            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                img{
                    width: 20px;
                    height: 22px;
                }
            }
        }
    }
</style>